<template>
  <el-dialog
    title="修改库存"
    :visible.sync="dialogVisible"
    width="600px"
    @close="handleClose"
    :close-on-click-modal="false"
  >
    <el-form
      ref="editForm"
      :model="form"
      :rules="rules"
      label-width="120px"
      class="edit-form"
    >
      <el-form-item label="材料名称" prop="materialName">
        <el-input
          v-model="form.materialName"
          disabled
          placeholder="材料名称"
        />
      </el-form-item>
      
      <el-form-item label="品牌" prop="materialBrand">
        <el-input
          v-model="form.materialBrand"
          disabled
          placeholder="品牌"
        />
      </el-form-item>
      
      <el-form-item label="规格型号" prop="materialSpecifications">
        <el-input
          v-model="form.materialSpecifications"
          disabled
          placeholder="规格型号"
        />
      </el-form-item>
      
      <el-form-item label="单位成本" prop="materialPrice">
        <el-input
          v-model="form.materialPrice"
          disabled
          placeholder="单位成本"
        />
      </el-form-item>
      
      <el-form-item label="当前库存" prop="inventoryNum">
        <el-input-number
          v-model="form.inventoryNum"
          :min="0"
          :max="999999"
          placeholder="请输入库存数量"
          style="width: 100%"
        />
      </el-form-item>
      
      <el-form-item label="仓库名称" prop="warehouseName">
        <el-input
          v-model="form.warehouseName"
          disabled
          placeholder="仓库名称"
        />
      </el-form-item>
    </el-form>
    
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="loading">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { inventoryApi } from '@/api/inventory'

export default {
  name: 'EditInventoryDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    inventoryData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      form: {
        inventoryId: '',
        materialName: '',
        materialBrand: '',
        materialSpecifications: '',
        materialPrice: '',
        inventoryNum: 0,
        warehouseName: '',
        communityId: '',
        warehouseId: '',
        materialId: ''
      },
      rules: {
        inventoryNum: [
          { required: true, message: '请输入库存数量', trigger: 'blur' },
          { type: 'number', min: 0, message: '库存数量不能小于0', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    visible: {
      handler(newVal) {
        this.dialogVisible = newVal
        if (newVal && this.inventoryData) {
          this.initForm()
        }
      },
      immediate: true
    },
    inventoryData: {
      handler(newVal) {
        if (newVal && this.visible) {
          this.initForm()
        }
      },
      deep: true
    }
  },
  methods: {
    // 初始化表单数据
    initForm() {
      this.form = {
        inventoryId: this.inventoryData.inventoryId || '',
        materialName: this.inventoryData.materialName || '',
        materialBrand: this.inventoryData.materialBrand || '',
        materialSpecifications: this.inventoryData.materialSpecifications || '',
        materialPrice: this.inventoryData.materialPrice || '',
        inventoryNum: this.inventoryData.inventoryNum || 0,
        warehouseName: this.inventoryData.warehouseName || '',
        communityId: this.inventoryData.communityId || '',
        warehouseId: this.inventoryData.warehouseId || '',
        materialId: this.inventoryData.materialId || ''
      }
    },

    // 提交修改
    async handleSubmit() {
      try {
        // 表单验证
        await this.$refs.editForm.validate()
        
        this.loading = true
        
        // 构建提交数据
        const submitData = {
          inventoryId: this.form.inventoryId,
          communityId: this.form.communityId,
          warehouseId: this.form.warehouseId,
          materialId: this.form.materialId,
          inventoryNum: this.form.inventoryNum
        }
        
        // 调用修改接口
        const response = await inventoryApi.updateInventory(submitData)
        
        if (response.code === 200) {
          this.$message.success('修改成功')
          this.$emit('success')
          this.handleClose()
        } else {
          this.$message.error(response.message || '修改失败')
        }
      } catch (error) {
        if (error !== false) { // 排除表单验证失败的情况
          console.error('修改库存失败:', error)
          this.$message.error('修改失败，请稍后重试')
        }
      } finally {
        this.loading = false
      }
    },

    // 关闭对话框
    handleClose() {
      this.dialogVisible = false
      this.$emit('update:visible', false)
      this.resetForm()
    },

    // 重置表单
    resetForm() {
      this.form = {
        inventoryId: '',
        materialName: '',
        materialBrand: '',
        materialSpecifications: '',
        materialPrice: '',
        inventoryNum: 0,
        warehouseName: '',
        communityId: '',
        warehouseId: '',
        materialId: ''
      }
      if (this.$refs.editForm) {
        this.$refs.editForm.clearValidate()
      }
    }
  }
}
</script>

<style scoped>
.edit-form {
  padding: 20px 0;
}

.dialog-footer {
  text-align: right;
}

.el-input-number {
  width: 100%;
}

/* 禁用状态的样式优化 */
.el-input.is-disabled .el-input__inner {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #606266;
}
</style>

